<template>
  <div class="dashboard-container">
    <div class="container">
      <div class="tableBar">
        <label style="margin-right: 5px">
          员工姓名:
        </label>
        <el-input v-model="name" placeholder="请输入员工姓名" style="width: 15%" />
        <el-button type="primary" style="margin-left: 5px" v-on:click="pageQuery()">查询</el-button>
        <el-button type="primary" style="float: right" @click="handleAddEmp">+添加员工</el-button>
        <el-table :data="records" stripe style="width: 100%">
          <el-table-column prop="name" label="员工姓名" width="180">
          </el-table-column>

          <el-table-column prop="username" label="账号" width="180">
          </el-table-column>

          <el-table-column prop="phone" label="手机号">
          </el-table-column>

          <el-table-column prop="status" label="账号状态">
            <template v-slot="scope">
              {{ scope.row.status === 0 ? '禁用' : '启用' }}
            </template>
          </el-table-column>

          <el-table-column prop="updateTime" label="最后操作时间">
          </el-table-column>

          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button type="text" @click="handleUpdateEmp(scope.row)">修改</el-button>
              <el-button type="text" @click="handleStartOrStop(scope.row)">{{ scope.row.status === 1 ? '禁用' : '启用'
              }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
          :page-sizes="[10, 20, 30, 40, 50]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
//@ vue默认是src目录
import { getEmployeeList, enableOrDisableEmployee } from '@/api/employee';
export default {

  //模型数据
  data() {
    return {
      name: '',
      page: 1,
      pageSize: 10,
      total: 0,
      records: []
    }
  },

  //生命周期方法
  created() {
    this.pageQuery()
  },

  methods: {
    pageQuery() {

      //准备请求参数
      const params = { name: this.name, page: this.page, pageSize: this.pageSize };

      getEmployeeList(params).then(res => {
        if (res.data.code === 1) {
          this.total = res.data.data.total;
          this.records = res.data.data.records;
        }
      }).catch(err => {
        //ElementUI组件
        this.$message.error('请求出错了: ' + err.message);
      })
    },
    //pageSize发生变化时触发
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pageQuery()
    },
    handleCurrentChange(page) {
      this.page = page
      this.pageQuery()
    },
    //启用禁用员工账号
    handleStartOrStop(row) {
      //alert(`id=${row.id} status=${row.status}`)

      if (row.username === 'admin') {
        this.$message.error('admin为管理员账号，不可禁用')
        return
      }

      this.$confirm('确认要修改当前员工账号的状态吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        const p = {
          id: row.id,
          status: !row.status ? 1 : 0
        }

        enableOrDisableEmployee(p).then(res => {
          if (res.data.code === 1) {
            this.$message.success('员工的账号状态修改成功!')
            this.pageQuery()
          }
        })
      })
    },
    //添加员工
    handleAddEmp() {
      //跳转至添加员工页面
      this.$router.push('/employee/add')
    },
    //跳转到修改员工页面(组件)
    handleUpdateEmp(row) {
      //如果是管理员账号，则不允许修改
      if (row.username === 'admin') {
        this.message.error('admin为系统的管理员账号，不能修改');
        return
      }
      //跳转到修改页面,通过地址栏传递参数
      this.$router.push({
        path: '/employee/add',
        query: { id: row.id }
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.disabled-text {
  color: #bac0cd !important;
}
</style>
